<template>
    <!-- 登录 -->
    <div class="login">
        <div class="container">
            <div class="login-main clear">
                <div class="login-img">
                    <img src="../assets/images/temp/login.jpg" alt="">
                </div>
                <div class="login-content">
                    <div class="login-hd">登录</div>
                    <div class="login-bd">
                        <div class="form-section">
                            <label class="input-label" for="">账号:</label>
                            <input class="input-text" v-model="username" type="text" placeholder="请输入您的手机号">
                        </div>
                        <div class="form-section">
                            <label class="input-label" for="">密码:</label>
                            <input class="input-text" v-model="password" type="text" placeholder="请输入您的密码">
                        </div>
                        <div class="btn-group">
                            <a class="input-btn" @click="checkLogin">登录</a>
                        </div>
                    </div>
                    <div class="login-ft">
                        <a href="忘记密码.html" class="init">忘记密码</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data() {
        return {
            username: '',
            password: ''
        }
    },

    // 过滤器
    filters: {

    },
    // 计算属性
    computed: {

    },
    // 方法
    methods: {
        checkLogin() {
            var _this = this;
            if (this.username == "") {
                this.$message({
                    message: '您输入的账号有误',
                    type: 'error',
                    duration: '10000',
                    customClass: 'aaaaa'
                });
                return
            }
            if (this.password == "") {
                this.$message({
                    message: '您输入的密码有误',
                    type: 'error',
                    duration: '1000'
                });
                return
            }


            var params = {
                AccountOrPhone: this.username,
                Password: this.password
            }

            $.post('http://192.168.0.155:155/api/Main/Login', params, (res) => {
                let data = JSON.parse(res);
                if (data.status === 1) {
                    this.$message({
                        message: data.msg,
                        type: 'error',
                        duration: '1000',
                    });
                } else {
                    this.$message({
                        message: data.msg,
                        type: 'success',
                        duration: '1000',
                        onClose() {
                             sessionStorage.userName = _this.username;
                             
                            _this.$emit('changeLogin', _this.username);
                        }
                    });
                }

            })
        }

    },
    mounted() {

    }
}
</script>

<style scoped>
/* login */

.login,
.register {
    padding: 50px 0;
}

.login-main {
    padding: 20px;
    margin: 22px 0 23px;
    border: 1px solid #ececec;
    border-radius: 5px;
    background: #fff;
}

.login-main .login-content,
.login-main .login-img {
    float: left;
}

.login-main .login-img,
.login-main .login-img img {
    width: 500px;
    height: 446px;
    margin-left: 20px;
    margin-top: 5px;
}

.login-main .login-content {
    padding-left: 129px;
    padding-top: 75px;
}

.login-content .login-hd {
    font-size: 28px;
    color: #3795e5;
    font-weight: bold;
    margin-bottom: 15px;
}

.login-content .login-bd,
.register-content .register-bd {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #d2d2d2;
}

.login-bd .form-section {
    padding-bottom: 20px;
}

.login-ft {
    text-align: center;
}
</style>